<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小红书个人主页</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="/css/person.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <script src="/js/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- 左侧导航栏 -->
      <div class="sidebar" style="margin-top: -60px">
        <img
          style="height: 40px; margin-bottom: 20px"
          src=""
          alt=""
        />
        <div class="nav-item" data-page="index.html">首页</div>
        <div class="nav-item">通知</div>
        <div class="nav-item active" data-page="person.html">我</div>
      </div>

      <!-- 主要内容区 -->
      <main class="main-content">
        <!-- 用户信息部分 -->
        <div class="user-profile">
          <div class="profile-header">
            <img
              src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
              alt="帅小蜜"
              class="avatar"
            />
            <div class="user-info">
              <h1>帅小蜜</h1>
              <div class="user-meta">
                <span class="user-id">会员号：563676562</span>
                <span class="separator">|</span>
                <span class="location">IP属地：江苏</span>
              </div>
              <div class="gender-icon">
                <i class="fas fa-mars gender-icon-female"></i
                ><text class="age">33岁</text>
              </div>
              <div class="user-stats">
                <span><text>29</text><span>关注</span></span>
                <span> <text>6 </text><span>粉丝</span> </span>
                <span> <text>1</text><span> 获赞与收藏</span> </span>
              </div>
            </div>
          </div>

          <!-- 内容标签栏 -->
          <div class="content-tabs">
            <div class="tabs-container">
              <div class="tab active" data-tab="notes">笔记</div>
              <div class="tab" data-tab="favorites">收藏</div>
              <div class="tab" data-tab="likes">点赞</div>
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 笔记内容 -->
            <div class="content-section active" id="notes">
              <div class="content-grid">
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="秋天的景色"
                  />
                  <div class="item-info">
                    <h3>秋天的景色</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>20</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 收藏内容 -->
            <div class="content-section" id="favorites">
              <div class="content-grid">
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="收藏的笔记"
                  />
                  <div class="item-info">
                    <h3>收藏的笔记</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>15</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 点赞内容 -->
            <div class="content-section" id="likes">
              <div class="content-grid">
                <div class="grid-item">
                  <img
                    class="big-avatar"
                    src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                    alt="点赞的笔记"
                  />
                  <div class="item-info">
                    <h3>点赞的笔记</h3>
                    <div class="item-meta">
                      <img
                        src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo31f734ea2m6005odtcdak0sfj2v7hn2g?imageView2/2/w/120/format/webp|imageMogr2/strip"
                        alt="帅小蜜"
                        class="small-avatar"
                      />
                      <span>帅小蜜</span>
                      <span class="likes"><i class="far fa-heart"></i>10</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 导航栏点击事件
        const navItems = document.querySelectorAll(".nav-item");
        navItems.forEach((item) => {
          item.addEventListener("click", function () {
            const page = this.getAttribute("data-page");
            if (page) {
              window.location.href = page;
            }
          });
        });

        // 原有的标签页切换代码
        const tabs = document.querySelectorAll(".tab");
        const contentSections = document.querySelectorAll(".content-section");
        tabs.forEach((tab) => {
          tab.addEventListener("click", function () {
            // 移除所有标签的active类
            tabs.forEach((t) => t.classList.remove("active"));
            // 添加当前标签的active类
            this.classList.add("active");

            // 获取当前标签对应的内容区域ID
            const tabId = this.getAttribute("data-tab");

            // 隐藏所有内容区域
            contentSections.forEach((section) => {
              section.classList.remove("active");
            });

            // 显示对应的内容区域
            document.getElementById(tabId).classList.add("active");
          });
        });
      });
    </script>
  </body>
</html>
